<template>
  <div class="registered-start positRel">
    <div class="main">
      <MenuLocation :title="'线下预约 / 挂号日期'"></MenuLocation>
      <div class="choose-date">
        <div class="date-content">
          <table class="tab">
            <thead>
              <tr>
                <td v-for="item in dateList" :key="item.id">{{ item.day }}</td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td
                  v-for="(item, index) in dateList"
                  :key="item.id"
                  :style="index == current ? 'background:#FD5151' : 'background:#fff'"
                  @click="chooseDate(item, index)"
                >
                  <span
                    class="date"
                    :style="index == current ? 'color:#fff' : 'color:#FD5151'"
                    >{{ item.month < 10 ? `0${item.month}` : item.month }}-{{
                      item.date < 10 ? `0${item.date}` : item.date
                    }}</span
                  >
                  <span
                    class="is-have"
                    :style="index == current ? 'color:#fff' : 'color:#9A9A9A'"
                    >{{ item.num > 0 ? "有" : "无" }}</span
                  >
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="doctor-list">
        <div class="doctor-card" v-for="(item, index) in expertList" :key="index">
          <div class="head-face">
            <img
              :src="item.expertVO.face"
              class="score-face"
              style="width: 100%; height: 100%"
            />
          </div>
          <div class="doctor-information">
            <div class="name">
              <span>{{ item.expertVO.realName }}</span>
              <div class="score">
                <img
                  src="@/assets/online_consulting/score.png"
                  class="score-face"
                />
                <span>{{ item.expertVO.scoreAvg }} </span>
              </div>
            </div>
            <p class="describe">
              {{ item.domain }}
            </p>
          </div>
          <div class="price">
            <span>¥ {{ item.expertVO.registerPrice || 0 }}</span>
            <div class="ask" @click="goTo(item.expertVO)">前往预约</div>
          </div>
          <div class="remaining">
            <img class="movie" src="@/assets/registered/movie.png" />
            <span>余号: {{ item.remainder }}</span>
          </div>
        </div>
      </div>
      <!-- <div class="page">
        <Page :total="100" :page-size="4" @on-change="changeCurrent" />
      </div> -->
    </div>
    <Footer :top="88"></Footer>
  </div>
</template>
<script>
import Footer from "@/components/footer/my_footer.vue";
import MenuLocation from "@/components/myComponents/menuLocation.vue";
import { getAdress, getExpert } from "@/api/chooseDate.js";

export default {
  data() {
    return {
      dateList: [],
      total: 0,
      current: 0,
      id: "",
      isregiste: {},
      arr: [], //每周能预约人数
      expertList: [],
      siteName: "",
    };
  },
  components: {
    Footer,
    MenuLocation,
  },
  beforeCreate() {},
  mounted() {
    this.id = localStorage.getItem("siteId");
    this.siteName = localStorage.getItem("siteName");
    // this.id = this.$route.query.data.id;
    // this.siteName = this.$route.query.data.siteName;
    this.getDate();
    this.getadress();
    this.getexpert();
  },
  methods: {
    // 查询场地是否可用
    getadress() {
      let data = {
        id: localStorage.getItem("siteId"),
      };
      getAdress(data).then((res) => {
        if (res.success) {
          this.isregiste = res.result;
          for (let key in this.isregiste) {
            for (let i = 0; i < this.dateList.length; i++) {
              if (this.dateList[i].id == key) {
                this.dateList[i].num = this.isregiste[key];
                // this.getexpert();
              }
            }
          }
        }
      });
    },
    // 获取专家列表
    getexpert() {
      let data = {
        siteId: localStorage.getItem("siteId"),
        week: this.dateList[0].id,
      };
      getExpert(data).then((res) => {
        if (res.success) {
          this.expertList = res.result;
        }
      });
    },
    getDate(num = 0) {
      this.dateList = [];
      this.current = 0;
      this.total += num;
      const date = new Date();
      const dayTime = 24 * 60 * 60 * 1000;
      const times = date.getTime() + this.total * dayTime;
      for (let i = 0; i < 7; i++) {
        const day = new Date(times + dayTime * i).getDay();
        const date = new Date(times + dayTime * i).getDate();
        const month = new Date(times + dayTime * i).getMonth();
        const year = new Date(times + dayTime * i).getFullYear();
        if (day == 1) {
          this.dateList.push({
            day: "周一",
            date: date,
            month: month + 1,
            year,
            id: day,
          });
        } else if (day == 2) {
          this.dateList.push({
            day: "周二",
            date: date,
            month: month + 1,
            year,
            id: day,
          });
        } else if (day == 3) {
          this.dateList.push({
            day: "周三",
            date: date,
            month: month + 1,
            year,
            id: day,
          });
        } else if (day == 4) {
          this.dateList.push({
            day: "周四",
            date: date,
            month: month + 1,
            year,
            id: day,
          });
        } else if (day == 5) {
          this.dateList.push({
            day: "周五",
            date: date,
            month: month + 1,
            year,
            id: day,
          });
        } else if (day == 6) {
          this.dateList.push({
            day: "周六",
            date: date,
            month: month + 1,
            year,
            id: day,
          });
        } else if (day == 0) {
          this.dateList.push({
            day: "周日",
            date: date,
            month: month + 1,
            year,
            id: 7,
          });
        }
      }
    },
    chooseDate(item, index) {
      this.current = index;
      let data = {
        siteId: localStorage.getItem("siteId"),
        week: item.id,
      };
      getExpert(data).then((res) => {
        if (res.success) {
          this.expertList = res.result;
        }
      });
    },
    goTo(item) {
      let data = {
        siteId: localStorage.getItem("siteId"),
        expertId: item.id,
        realName: item.realName,
        siteName: localStorage.getItem("siteName"),
        visitDate: this.current
      };
      localStorage.setItem("realName", item.realName);
      localStorage.setItem("expertId", item.id);
      localStorage.setItem("visitDate", this.current);
      localStorage.setItem("consultPrice", item.registerPrice);
      this.$router.push({
        path: "/doctorList",  
        query: {
          doctor: data,
        },
      });
    },
    changeCurrent(current) {
      console.log(current);
    },
  },
};
</script>
<style lang="scss" scoped>
.registered-start {
  min-height: calc(100vh - (80 / 1920 * 100vw));
  .main {
    padding: 0px calc(360 / 1920 * 100vw);
    display: flex;
    flex-direction: column;
    min-height: calc(936 / 1920 * 100vw);
    .choose-date {
      padding: calc(24 / 1920 * 100vw) calc(12 / 1920 * 100vw);
      background: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left-btn {
        transform: rotate(180deg);
        width: calc(24 / 1920 * 100vw);
        height: calc(41 / 1920 * 100vw);
        cursor: pointer;
      }
      .date-content {
        .tab {
          display: flex;
          flex-direction: column;
          > thead {
            > tr {
              display: flex;
              > td {
                width: calc(154 / 1920 * 100vw);
                text-align: center;
                border: 1px solid #dddddd;
                display: block;
                background: #f2f2f2;
                height: calc(30 / 1920 * 100vw);
                line-height: calc(30 / 1920 * 100vw);
              }
            }
          }
          > tbody {
            > tr {
              display: flex;
              > td {
                width: calc(154 / 1920 * 100vw);
                text-align: center;
                border: 1px solid #dddddd;
                display: block;
                padding: calc(8 / 1920 * 100vw) 0px;
                cursor: pointer;
                span {
                  display: block;
                }
                > span:first-of-type {
                  color: #fd5151;
                  font-size: calc(16 / 1920 * 100vw);
                }
                > span:last-of-type {
                  color: #9a9a9a;
                  font-size: calc(12 / 1920 * 100vw);
                }
              }
            }
          }
        }
      }
      .right-btn {
        width: calc(24 / 1920 * 100vw);
        height: calc(41 / 1920 * 100vw);
        cursor: pointer;
      }
    }
    .doctor-list {
      .doctor-card {
        display: flex;
        position: relative;
        //   align-items: center;
        margin-top: calc(17 / 1920 * 100vw);
        background: #fff;
        border-radius: calc(5 / 1920 * 100vw);
        padding: calc(19 / 1920 * 100vw) calc(43 / 1920 * 100vw) calc(19 / 1920 * 100vw)
          calc(19 / 1920 * 100vw);
        .head-face {
          width: calc(86 / 1920 * 100vw);
          height: calc(86 / 1920 * 100vw);
          border-radius: 4px;
          overflow: hidden;
        }
        .doctor-information {
          width: calc(700 / 1920 * 100vw);
          margin-left: calc(20 / 1920 * 100vw);
          .name {
            display: flex;
            align-items: center;
            > span {
              font-size: calc(18 / 1920 * 100vw);
              color: #333333;
            }
            .score {
              margin-left: calc(8 / 1920 * 100vw);
              .score-face {
                width: calc(12 / 1920 * 100vw);
                height: calc(13 / 1920 * 100vw);
              }
              > span {
                font-size: calc(14 / 1920 * 100vw);
                margin-left: calc(4 / 1920 * 100vw);
              }
            }
            .describe {
              color: #9a9a9a;
              font-size: calc(14 / 1920 * 100vw);
            }
          }
        }
        .price {
          display: flex;
          align-items: center;
          margin-left: auto;
          > span {
            font-size: calc(18 / 1920 * 100vw);
            color: #fd5151;
          }
          .ask {
            width: calc(80 / 1920 * 100vw);
            height: calc(34 / 1920 * 100vw);
            background: #fd5151;
            color: #fff;
            font-size: calc(14 / 1920 * 100vw);
            border-radius: calc(5 / 1920 * 100vw);
            text-align: center;
            line-height: calc(34 / 1920 * 100vw);
            margin-left: calc(35 / 1920 * 100vw);
            cursor: pointer;
          }
        }
        .remaining {
          position: absolute;
          display: flex;
          align-items: center;
          bottom: calc(15 / 1920 * 100vw);
          right: calc(44 / 1920 * 100vw);
          .movie {
            width: calc(15 / 1920 * 100vw);
            height: calc(13 / 1920 * 100vw);
            margin-right: calc(4 / 1920 * 100vw);
          }
        }
      }
    }
    .page {
      margin-top: calc(93 / 1920 * 100vw);
      margin-left: auto;
    }
  }
}
</style>
